<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="keywords" content="Editor.md,editor,Markdown Editor,Markdown,编辑器,Markdown编辑器,Markdown在线编辑器,在线编辑器" />
    <meta name="description" content="Editor.md: a simple online markdown editor." />
    <meta name="author" content="pandao, pandao@vip.qq.com" />
    <title>Editor.md - 开源在线 Markdown 编辑器</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="https://pandao.github.io/dist/css/planeui.min.css" />
    <link rel="stylesheet" href="css/editormd.min.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css?v=20190508" />
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <title>Markdown 配置：自动空格/段落开头空两格/矫正术语/启用目录/启用 Mark 标记/禁用脚注/wysiwyg & ir 模式不渲染代码块/不过滤 XSS/主题/为列表添加标记 -
        Vditor</title>
    <meta name="robots" content="index,follow,archive">
    <meta name="description"
          content="Vditor - 易于使用的 Markdown 编辑器，为适配不同的应用场景而生。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React、Angular，提供桌面版。"/>
    <meta name="copyright" content="B3log"/>
    <link rel="canonical" href="https://b3log.org/vditor/demo/advanced-markdown.html">
    <link rel="apple-touch-icon" href="https://b3log.org/images/brand/vditor-128.png">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta http-equiv="Window-target" content="_top"/>
    <link rel="icon" type="image/png" href="https://b3log.org/images/brand/vditor-128.png"/>
    <link rel="shortcut icon" type="image/x-icon" href="https://b3log.org/images/brand/vditor-512.png"/>
    <link type="text/css" rel="stylesheet" href="https://b3log.org/css/base.css" charset="utf-8"/>

    <meta property="og:locale" content="zh_CN"/>
    <meta property="og:title"
          content="Markdown 配置：自动空格/段落开头空两格/矫正术语/启用目录/启用 Mark 标记/禁用脚注/wysiwyg & ir 模式不渲染代码块/不过滤 XSS/主题/为列表添加标记 - Vditor"/>
    <meta property="og:description"
          content="Vditor - 易于使用的 Markdown 编辑器，为适配不同的应用场景而生。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React、Angular，提供桌面版。"/>
    <meta property="og:image" content="https://b3log.org/images/brand/vditor-128.png"/>
    <meta property="og:url" content="https://b3log.org/vditor"/>
    <meta property="og:site_name" content="B3log"/>
    <meta name="twitter:card" content="summary_large_image"/>
    <meta name="twitter:description"
          content="Vditor - 易于使用的 Markdown 编辑器，为适配不同的应用场景而生。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React、Angular，提供桌面版。"/>
    <meta name="twitter:title"
          content="Markdown 配置：自动空格/段落开头空两格/矫正术语/启用目录/启用 Mark 标记/禁用脚注/wysiwyg & ir 模式不渲染代码块/不过滤 XSS/主题/为列表添加标记 - Vditor"/>
    <meta name="twitter:image" content="https://b3log.org/images/brand/vditor-128.png"/>
    <meta name="twitter:url" content="https://b3log.org/vditor"/>
    <meta name="twitter:site" content="@b3logos"/>
    <meta name="twitter:creator" content="@b3logos"/>
    <script defer>
const addScript=(path,callback)=>{const scriptElement=document.createElement('script')
scriptElement.src=path
scriptElement.async=true
document.head.appendChild(scriptElement)
scriptElement.onload=()=>{callback()}}
const addStyle=(url)=>{const styleElement=document.createElement('link')
styleElement.rel='stylesheet'
styleElement.type='text/css'
styleElement.href=url
document.getElementsByTagName('head')[0].appendChild(styleElement)}
const updateCode=(btnElement,code)=>{if(btnElement.classList.contains('btn--red')){return}else{const redBtnElement=document.querySelector('.btn--red')
if(redBtnElement){redBtnElement.classList.remove('btn--red')}
btnElement.classList.add('btn--red')}
const demoCodeElement=document.getElementById('vditorDemoCode')
demoCodeElement.firstElementChild.innerHTML=`<code>${code}
</code>`
Vditor.highlightRender({lineNumber:true,enable:true},demoCodeElement,"https://cdn.jsdelivr.net/npm/vditor")
Vditor.codeRender(demoCodeElement)}
const autoType=()=>{const typeElement=document.getElementById('autoType')
if(!typeElement){return}
const texts=['实现 CommonMark 和 GFM 规范','支持数学公式、图表、五线谱、脑图等14+渲染','所见即所得（wysiwyg）','即时渲染（ir）','分屏预览（sv）','易于使用的 Markdown 编辑器，为适配不同的应用场景而生',]
let textLength=0
let time=0
texts.forEach((text,i)=>{if(i>0){textLength+=text[i-1].length+20}
for(let j=0;j<text.length;j++){time+=200
setTimeout(()=>{typeElement.innerHTML=text.substr(0,j+1)+
`<span class="caret" style="${(j===text.length-1?'animation-name:flash':'')}"></span>`},time)}
if(i!==texts.length-1){time+=2000
for(let k=0;k<text.length;k++){time+=50
setTimeout(()=>{typeElement.innerHTML=typeElement.textContent.substr(0,typeElement.textContent.length-1)+'<span class="caret"></span>'},time)}}else{setTimeout(()=>{document.querySelector('.caret').style.animationName='flash'},time+1)}})}
addStyle('https://cdn.jsdelivr.net/npm/vditor@3.9.7/dist/index.css')
document.addEventListener('DOMContentLoaded',function(){autoType();if(document.getElementById('vditorComments')){addScript('https://cdn.jsdelivr.net/npm/vditor@3.9.7/dist/index.min.js',()=>{const demoCodeElement=document.getElementById('vditorDemoCode')
if(demoCodeElement){Vditor.highlightRender({lineNumber:true,enable:true},demoCodeElement,"https://cdn.jsdelivr.net/npm/vditor")
Vditor.codeRender(demoCodeElement)}
if(typeof vditorScript!=='undefined'){vditorScript()}
addScript('https://cdn.jsdelivr.net/npm/vcmt@1.3.2/dist/index.min.js',()=>{const vcomment=new Vcomment({id:'vditorComments',postId:'1549638745630',url:'https://ld246.com',userName:'Vanessa',currentPage:1,vditor:{hljsEnable:true,hljsStyle:'github',},after(){const commentCntElement=document.getElementById('commentsCount')
// document.getElementById('commentCnt').innerText=commentCntElement.innerText+
// ' 个讨论'
commentCntElement.nextSibling.remove()
commentCntElement.remove()},error(){document.getElementById('comments').remove()},})
// vcomment.render()
})})}
const dynamicElement=document.getElementById('dynamic')
if(dynamicElement){const xhr=new XMLHttpRequest()
xhr.open('GET','https://ld246.com/api/index/articles/tag/vditor?p=1')
xhr.withCredentials=true
xhr.onreadystatechange=()=>{if(xhr.readyState===XMLHttpRequest.DONE){if(xhr.status===200){const responseJSON=JSON.parse(xhr.responseText)
const articles=responseJSON.data.articles
if(responseJSON.code!==0||0===articles.length){dynamicElement.innerHTML='无新闻'
dynamicElement.style.backgroundImage='none'
return}
let listHTML='<ul class="fn-list">'
for(var i=0;i<articles.length;i++){const article=articles[i]
listHTML+='<li><a target=\'_blank\' href=\''+
article.articlePermalink+
'\'>'
+article.articleTitle+'</a>&nbsp;<small class="ft-fade">['+
article.cmtTimeAgo
+']</small></li>'}
listHTML+='</ul>'
dynamicElement.innerHTML=listHTML
dynamicElement.style.backgroundImage='none'}else{dynamicElement.innerHTML='加载列表失败 :-('
dynamicElement.style.backgroundImage='none'}}}
xhr.send()}})


</script>
    <style>
        .header {
            background-color: #fff;
            box-shadow: rgba(0, 0, 0, 0.05) 0 1px 7px;
            border-bottom: 1px solid #e1e4e8;
        }

        .vditor-reset ul[data-style="+"] {
            list-style-type: "\2764";
        }

        .vditor-reset ul[data-style="+"] ul {
            list-style-type: "\1f49a"
        }

        .vditor-reset ul[data-style="+"] ul ul {
            list-style-type: "\1f49b"
        }

        .vditor-reset ul[data-style="-"] {
            list-style-type: korean-hangul-formal
        }

        .vditor-reset ul[data-style="-"] ul {
            list-style-type: decimal-leading-zero
        }

        .vditor-reset ul[data-style="-"] ul ul {
            list-style-type: lower-alpha
        }

        .vditor-reset ol[data-style="1)"] {
            list-style-type: simp-chinese-formal
        }

        .vditor-reset ol[data-style="1)"] ol {
            list-style-type: simp-chinese-informal
        }

        .vditor-reset ol[data-style="1)"] ol ol {
            list-style-type: trad-chinese-formal
        }
    </style>
</head>
<body>

  <a name="top"></a>
  <div class="pui-layout">
      <header class="pui-bg-blue page-header">
          <div class="pui-layout pui-layout-fixed pui-layout-fixed-1200 pui-layout-fixed-1360">
              <h1 class="pui-text-center pui-text-xxxxxl page-title animated zoomInDown">
                  <a href="./index.html" class="pui-text-white">
                      <i class="editormd-logo editormd-logo-2x"></i><strong>Aibot.MD.Editor</strong>
                  </a>
              </h1>
              <p class="pui-text-center pui-text-xl animated zoomInDown">开源在线 Markdown 编辑器</p>
          </div>
      </header>
      <!-- Add your content within the pui-layout -->
      <!-- For example, you can add sections, articles, etc. -->
  </div>



<div class="wrapper">


    <div id="vditor"></div>
    <div id="vditorDemoCode" class="vditor-reset">
       
    </div>
    <div class="fn-100"></div>
    <div class="fn-clear">
    </div>
    <div id="vditorComments"></div>
</div>
<!-- end main -->


<script>
  const setConfig = (it, type) => {
    const value = `[toc]

# Vditor

一款浏览器端的markdown编辑器,支持所见即所得（富文本）、即时渲染（类似 Typora）和分屏预览模式.

# XSS

<img src="test" onerror="alert('XSS')">

# 列表

+ 所见即所得（wysiwyg）
    + 即时渲染（ir）
        + test

- 所见即所得（wysiwyg）
    - 即时渲染（ir）
      - 分屏预览（sv）

1) 所见即所得（wysiwyg）
    1) 即时渲染（ir）
        1) 分屏预览（sv）

==Mark 标记==

脚注
===

这里是一个脚注引用[^1]，这里是另一个脚注引用[^bignote]。

\`\`\`javascript
new Vditor('vditor')
\`\`\`

[^1]: 第一个脚注定义。
[^bignote]: 脚注定义可使用多段内容。`

    document.getElementById('vditor').innerHTML = ''

    let config = {}
    config[type] = true
    if (type === 'footnotes' || type === 'codeBlockPreview' || type === 'sanitize') {
      config[type] = false
    }

    let options = {
      height: 360,
      theme: config.theme,
      mode: (type === 'paragraphBeginningSpace' || type === 'sanitize' || type === 'listStyle') ? 'sv' : 'wysiwyg',
      cache: {
        enable: false,
      },
      preview: {
        markdown: config,
      },
      value,
    }
    if (type && type.indexOf('theme') > -1) {
      options = {
        height: 360,
        theme: type.split('-')[1] === "dark" ? "dark" : "light",
        cache: {
          enable: false,
        },
        preview: {
          theme: {
            current: type.split('-')[1]
          },
        },
        value,
      }
    }

    updateCode(it, `new Vditor('vditor', ${JSON.stringify(options, null, '  ').replace(/\\n/g, `
`).replace('<', '&lt;').replace(/`/g, '\\`').replace('"[', '`[').replace('。"', '。`')})`)
    new Vditor('vditor', options)
  }
  vditorScript = () => {
    new Vditor('vditor', {
      height: 1080,
      cache: {
        enable: true,
      },
      value: 'Markdown 配置',
    })
  }
</script>
</body>
</html>
